<template>
	<view class="container home">
		<uni-nav-bar :statusBar="true" :title="type === 'transfer'?'调仓':'借'" background-color="#fff" color="#333"
			:border="false" :fixed="true" t-font-size="32rpx" left-icon="left" @clickLeft="back"></uni-nav-bar>
		<watermark></watermark>

		<view class="zyjz pad20 bgf9f">

			<view class="omit1 text-center select" @click="toggle('top')">
				<text class="uni-nav-bar-text mgn-r-10">{{warehouse.text}}</text>
				<uni-icons type="arrowdown" color="#666" size="18" />
			</view>
			<uni-search-bar style="width: 75%" v-model="searchValue" :radius="50" @input="onSearch" cancelButton="none">
			</uni-search-bar>
		</view>
		<!-- <button @click="getToken">获取token</button> -->
		<view class="zyjz flex-start-c">
			<view class="bgf9f classify f26 text-center">
				<block v-for="(item,int) in treeCatList" :key="int">
					<view class=" pad-t-30 pad-b-30 " :class="{active:int === active}" @click="onActive(int,item)">
						<text>{{item.name}}</text>
					</view>
					<view class="" v-show="item.isExpand">
						<view class="pad-l-10 pad-t-30 pad-b-30 clAAA" v-for="(it,i) in item.item">
							<text :class="{cl3e8:catId === it.id}" @click="onActive(int,it)">{{it.name}}</text>
						</view>
						<!-- <view class="pad-l-10 pad-t-30 pad-b-30 clAAA">
								<text>分类1-1</text>
							</view>
							<view class="pad-l-10 pad-t-30 pad-b-30 clAAA">
								<text>分类1-1</text>
							</view>
							<view class="pad-l-10 pad-t-30 pad-b-30 clAAA">
								<text>分类1-1</text>
							</view> -->
					</view>

				</block>
			</view>
			<view class="goods-ul " style="width:75%">
				<scroll-view scroll-y style="height: 70vh;" @scrolltolower="getMore">
					<view class="goods  zyjz f26 cl343 flex-start-c" v-for="(item,int) in items" :key="int">
						<view class="out" v-if="item.num <= 0">
							<image src="../static/out.png" mode="widthFix"></image>
							<text class="clAAA f20">缺货</text>
						</view>
						<image :src="item.img" mode="widthFix"></image>
						<view class="mgn-l-20" style="width:58%">
							<view class="omit1">
								{{item.goods_name}}
							</view>
							<view class="zyjz space-between mgn-t-100">
								<text class="f24 clff0">{{item.num}}</text>
								<uni-number-box v-model="item.carts_num" :disabled="item.num <= 0" :max="item.num"
									@change="(e)=>{changeCar(e,item)}" />
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bottom zyjz pad-l-40 pad-t-20 pad-b-20 pad-r-20 bgfff f28 clAAA">
			<uni-badge class="uni-badge-left-margin" :text="car.length" absolute="rightTop" size="small">
				<image style="width: 68rpx;height: 68rpx;" src="../../static/logo.png" mode="widthFix" @click="gogo">
				</image>
			</uni-badge>
			<view class="mgn-l-30 mgn-r-75">
				请选择要申请的物料
			</view>
			<button class="mini-btn" type="primary" size="mini" @click="toggle('bottom')" hover-class="none">提交申请</button>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="text-center" v-if="popupType === 'top'">
				<view style="height:100rpx"></view>

				<view class="pad-t-20 pad-b-20" v-for="(item,int) in warehouseList" :key="int" @click="changeWarehouse(item)">
					{{item.text}}
				</view>
			</view>
			<view class="pad20" v-else>
				<uni-data-select v-model="transfer_w_id" :localdata="warehouseList" @change="change" placeholder="请选择调拨仓库"
					v-if="type === 'transfer'"></uni-data-select>
				<view class="goods  zyjz f26 cl343 flex-start-c " v-for="(item,int) in car">
					<image :src="item.img" mode="widthFix"></image>
					<view class="mgn-l-20" style="width:58%">
						<view class="omit1">
							{{item.goods_name}}
						</view>
						<view class="zyjz space-between mgn-t-100">
							<text class="f24 clff0">{{item.goods_num}}</text>
							<uni-number-box v-model="item.num" disabled />
						</view>
					</view>
				</view>
				<button style="width: 100%;" type="primary" hover-class="none" @click="onSub">提交申请</button>
			</view>
		</uni-popup>
		<image class="fab" :style="{top:`${fabY}px`,left:`${fabX}px`}" src="../../static/huan.png" mode="widthFix"
			@touchmove="drag" @click="go('/pages/out/out')"></image>
	</view>
</template>

<script>
	import watermark from '@/components/watermark.vue'
	import mixins from '@/mixins/index.js'
	import business from '@/mixins/business.js'
	import {
		render
	} from "vue"
	export default {
		mixins: [mixins, business],
		components: {
			watermark
		},
		data() {
			return {
				active: 0,
				popupType: '',
				fabX: 22.5,
				fabY: 475,
				w: 0,
				h: 0,

				warehouse: {
					id: 0,
					text: ''
				},
				catId: '',
				car: [],
				type: 'borrows',
				transfer_w_id: '',

				lists_url: 'goods',
				param: {
					page: 1,
					size: 20,
					keyword: null,
					wId: null,
					cat_id: null,
				},
				items: [],
			}


		},
		onLoad(e) {
			//调仓
			if (e && e.type) {
				this.type = e.type
				// uni.setNavigationBarTitle({
				// 	title: '调仓'
				// });
			}


			const that = this
			uni.getSystemInfo({
				success: res => {
					that.w = res.windowWidth
					that.h = res.windowHeight
				}
			})

			this.getWarehouse(() => {
				for (let i in this.warehouseList) {
					this.$set(this.warehouseList[i], 'value', this.warehouseList[i].id)
				}
				this.warehouse = this.warehouseList[0]
				this.getCarList()

			}, this.infoData.user_id)
			this.getCat(() => {
				for (let i in this.treeCatList) {
					if (i == 0) {
						this.$set(this.treeCatList[i], 'isExpand', true)
					} else {
						this.$set(this.treeCatList[i], 'isExpand', false)
					}
				}
			})
		},
		onShow() {
			this.verifyLogin()
			this.getGoods()
		},
		methods: {
			getToken() {
				const token = this.api.cache("token")
				this.api.alert({
					msg: token
				})
			},
			onSearch(e) {
				this.param.keyword = e ? e : null
				this.getGoods()
			},

			onSub() {
				const obj = {
					w_id: this.warehouse.id,
					type: this.type,
					transfer_w_id: this.type === 'transfer' ? this.transfer_w_id : null
				}
				if (this.type === 'transfer' && !this.transfer_w_id) return this.api.msg('请选择调拨仓库')
				this.api.post('submit_carts', obj).then(res => {
					this.car = []
					this.go('/pages/home/confirm?data=' + JSON.stringify(res.data[0]))
					this.$refs.popup.close()
				})
			},
			getCarList() {
				const obj = {
					w_id: this.warehouse.id,
					type: this.type
				}
				this.api.get('carts', obj).then(res => {
					this.car = res.data.list
				})
			},
			changeCar(e, item) {
				const obj = {
					w_goods_id: item.id,
					num: e,
					methods: '=',
					type: this.type
				}
				this.api.get('save_carts', obj).then(res => {
					this.getCarList()
				})
			},
			changeWarehouse(e) {
				this.warehouse = e
				this.$refs.popup.close()
				this.getGoods()
			},
			verifyLogin() {

				if (!this.infoData) {
					this.rgo('/pages/login/login')
				} else if (this.infoData === 'admin' || this.infoData === 'warehouse') {
					this.rgo('/pages/person/admin/admin')
				}
			},


			gogo() {
				// this.go('/pages/person/admin/admin')
				// return
				if (this.infoData.type === 'admin' || this.infoData.type === 'warehouse') {
					// this.go('/pages/person/admin/admin')
				} else if (this.infoData.type === 'team') {
					this.go('/pages/person/leader/leader')
				} else {
					this.go('/pages/person/user/person')
				}
			},
			onActive(e, item) {
				this.active = e
				this.treeCatList[e].isExpand = true
				this.catId = item.id
				this.getGoods()
			},
			toggle(type) {
				if (type === 'bottom' && this.car.length === 0) return this.api.msg('请选择物料')
				this.popupType = type
				this.$refs.popup.open(type)
			},
			fabClick() {},

			drag(e) {
				const w = this.w
				const h = this.h
				let x = e.touches[0].pageX - 20
				let y = e.touches[0].pageY - 20
				if (x > 5 && x < w - 50) {
					this.fabX = x
				}
				if (y > 5 && y < h - 60) {
					this.fabY = y
				}
			},
			getGoods() {
				this.param.page = 1
				this.param.wId = this.warehouse.id
				this.param.cat_id = this.catId
				this.get_lists();
			}
		}
	}
</script>

<style lang="less">
	.home {
		.select {
			width: 140rpx;
		}

		.uni-searchbar {
			/deep/ .uni-searchbar__box {
				background: #fff !important;
			}
		}

		.classify {
			width: 180rpx;
			height: 70vh;
			border-radius: 0rpx 20rpx 0rpx 0rpx;
			border: 1px solid #eee;
			overflow-y: auto;



			.active {
				position: relative;
				background: #fff;

				&::after {
					content: '';
					position: absolute;
					top: 20rpx;
					left: 0;
					width: 8rpx;
					height: 55rpx;
					background: #3E86F4;
				}

				;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-shadow: 0rpx -1rpx 8rpx 1rpx rgba(0, 0, 0, 0.08);

			button {
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #3E86F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.fab {
			position: fixed;
			// top: 950rpx;
			// left: 45rpx;
			width: 90rpx;
			height: 90rpx;
			z-index: 5;
		}

		.goods {
			position: relative;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #f7f7f7;

			.out {
				position: absolute;
				top: 20rpx;
				left: 0rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					position: absolute;
					top: 10rpx;
					left: 5rpx;
				}
			}

			image {
				width: 200rpx;
				height: 150rpx;
			}

			.clff0 {
				color: #FF0000;
			}
		}
	}
</style>